<template>
<div id="root">
 <div class="head">
   <div class="head-left">
     <h2>{{feng.overall_score}}</h2>
     <p>综合评价</p>
     <p>高于啊回复卡萨交话费</p>
   </div>
   <div class="head-right">
    <p>服务态度<el-rate
        v-model="value"
        disabled
        show-score
        text-color="#ff9900"
        score-template="{value}">
    </el-rate></p>
     <p>菜品评价<el-rate
         v-model="value"
         disabled
         show-score
         text-color="#ff9900"
         score-template="{value}">
     </el-rate></p>
     <p>送达时间 分钟</p>
   </div>
 </div>

  <div class=tag>
    <div v-for="(v,i) in classify" :key="i" :class="{xuan:xuanzhong==i}" @click="xu(i)">{{v.name}}({{v.count}})</div>

  </div>
  <div class="content">
    <div class="contentlie" v-for="(v,i) in ping" :key="i">
      <div class="content-img"><img :src="'https://fuss10.elemecdn.com/'+v.avatar" alt=""></div>
      <div> 
      <p class="content-pp">{{v.username}} <span>{{v.rated_at}}</span></p>
        <p><el-rate
            v-model="v.rating_star"
            disabled
            show-score
            text-color="#ff9900"
            score-template="{value}">
        </el-rate>{{v.time_spent_desc}}</p>
        <div class="content-two-img">
          <div v-for="(item,j) in v.item_ratings" :key="j">
            <div> <img :src="'https://fuss10.elemecdn.com/'+item.image_hash" alt=""></div>
            <div class="img-p"> {{item.food_name}}</div>

          </div>

        </div>
      </div>
      <div></div>
    </div>

  </div>

</div>
</template>

<script>
export default {
name: "Appraise",
  created() {
  let id=this.$route.query.id;
  console.log(id)
  //评价
  this.axios.get('https://elm.cangdu.org/ugc/v2/restaurants/'+id+'/ratings?offset=0&limit=10').then(data=>{
    console.log(data.data);
    this.ping=data.data;
    });
    //评分
    this.axios.get("https://elm.cangdu.org/ugc/v2/restaurants/"+id+"/ratings/scores").then(data=>{
      console.log(data.data);
      this.feng=data.data;
    });
    //获取评价分类
    this.axios.get("https://elm.cangdu.org/ugc/v2/restaurants/"+id+"/ratings/tags").then(data=>{
      console.log(data.data);
      this.classify=data.data;
    });
    //店铺
    this.axios.get('https://elm.cangdu.org/shopping/restaurant/'+id).then(data => {
      // console.log(data.data)
      this.shop = data.data;
      this.$store.commit("datashop",data.data);
    }).catch(err => {
      console.log(err)
    });
  },
  data() {
    return {
      value: 3.693847763,
      ping:"",
      shop:"",
      feng:"",
      classify:"",
      xuanzhong:0,

    }

  },
  computed: {
    feng2() {
      return this.feng;
    }
  },
  methods: {
    xu(i) {
      this.xuanzhong=i;
    }
  },
}
</script>

<style scoped>
#root{
  height: 70%;
  position: fixed;
  width: 100%;
  margin-top: 170px;
  background-color: #f5f5f5;
}
.xuan{
  background-color: #3190e8 !important;
  color: #fff;
}
.head{
  display: flex;
  justify-content: space-between;
  background-color: #fff;
  padding:1%;
  margin-bottom: .5rem;
  border-top: 1px solid #ebebeb;
}
.head-left{
  text-align: center;
  width: 40%;
}
.head-right{
  width: 55%;
}
.head-left h2:nth-child(1){
  font-size: 1.5rem;
  color: #f60;
}
.head-left p:nth-child(2){
  font-size: .65rem;
  color: #666;
  margin-bottom: .1rem;
}
.head-left p:nth-child(3){
  font-size: .4rem;
  color: #999;
}
.head-right p{
  display: flex;
  color: #666666;
}
/deep/.el-rate__icon{
  font-size: 5px;
  margin: 0;
}
.tag{
  display: flex;
  flex-wrap: wrap;
  background-color: #fff;
  padding: .5rem;
}
.tag div{
  font-size: .6rem;
  //color: #6d7885;
  padding: .3rem;
  background-color: #ebf5ff;
  border-radius: .2rem;
  border: 1px;
  margin: 0 .4rem .2rem 0;
}
.contentlie{
  border-top: 1px solid #f1f1f1;
  display: -ms-flexbox;
  display: flex;
  padding: .6rem 0;
  background-color: #fff;
  //padding: 0 .5rem;

}
.content-img img{
  width: 1.5rem;
  height: 1.5rem;
  border: .025rem;
  border-radius: 50%;
  margin-right: .8rem;
}
.content-two-img{
    display: flex;
    flex-wrap: wrap;
    margin-bottom: .4rem;
  }
.content-two-img img{
    width: 3rem;
    height: 3rem;
    margin-right: .4rem;
    display: block;
  }
.img-p{
  font-size: .55rem;
  color: #999;
  width: 3.2rem;
  padding: .2rem;
  border: .025rem solid #ebebeb;
  border-radius: .15rem;
  margin-right: .3rem;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.content-pp{
  font-size: .4rem;
  color: #999;
  display: flex;
  justify-content: space-between;
}
</style>